<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:common="http://www.frenjoynet.rs/frenjoynet/core/ui"
      xmlns:a4j="http://richfaces.org/a4j">
<ui:component>
    <style type="text/css">
        .left {
            float: left;
            text-align: left;
        }

        .right {
            float: right;
            text-align: right;
        }
        .fontBold{
            font-weight:bold;;
        }
        .colorGray{
            color:gray;
        }
    </style>

    <!--@elvariable id="id" type="java.lang.String"-->

   <!--@elvariable id="leftTopText" type="java.lang.String"-->
    <!--@elvariable id="leftBottomText" type="java.lang.String"-->
    <!--@elvariable id="rightBottomText" type="java.lang.String"-->
     <!--@elvariable id="editPanel" type="java.lang.String"-->

    <h:panelGrid cellpadding="0" cellspacing="0" style="widht:100%">
        <a4j:outputPanel layout="block" style="width:100%; ">
            <a4j:outputPanel layout="block" styleClass="left">
                <h:outputLabel value="#{leftTopText}"/>
            </a4j:outputPanel>
            <a4j:outputPanel layout="block" styleClass="right">
                <a4j:commandLink id="show_#{id}" value="Change" style="display:block;"
                                 styleClass="fontBold"
                                 onclick="
                                allert('dddddddd');"/>
                <a4j:commandLink id="hide_#{id}" value="Hide" style="display:none;"
                                 styleClass="fontBold"
                                 onclick="
                                 #{common:inViewElement('show')}.style.display='none';
                                 #{common:inViewElement('represent')}.style.display='block';
                                 #{rich:element(editPanel)}.style.display='none';
                                 this.style.display='none';"/>
            </a4j:outputPanel>
        </a4j:outputPanel>

        <rich:separator height="1px" width="100%"/>

        <a4j:outputPanel id="represent" layout="block" style="width:100%; ">
            <a4j:outputPanel layout="block" styleClass="left">
                <h:outputLabel value="#{leftBottomText}" styleClass="fontBold, colorGray"/>
            </a4j:outputPanel>
            <a4j:outputPanel layout="block" styleClass="right">
                <h:outputLabel value="#{rightBottomText}"  styleClass="fontBold, colorGray"/>
            </a4j:outputPanel>
        </a4j:outputPanel>

    </h:panelGrid>
</ui:component>
</html>


